	/* ==================
         自己定义的样式
		 减少在uni.scss的样式，放入app.vue中。
		 uni.scss的样式会导入uview每一个组件的scss中
 ==================== */
	.css-page {
		padding: 0;
		/* #ifndef APP */
		min-height: 100vh;
		/* #endif */
		
		width:100vw;
		background-color: #f5f7f9;
	}

	/* 整页变灰 */
	.css-bg-grayscale {
		/* #ifndef APP-NVUE */
		filter: grayscale(98%);
		/* #endif */
	}

	.css-bar {
		display: flex;
		align-items: flex-start;
		height: 80rpx;
	}

	.css-bg-cover-img {
		/* #ifndef APP-NVUE */
		background-repeat: no-repeat;
		background-size: contain;
		background-position: left center;
		/* #endif */
	}

	/*  -- flex弹性布局 -- */
	.css-flex,
	.css-flex-row,
	.css-flex-x {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row !important;
	}

	.css-flex-y,
	.css-flex-column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column !important;
	}
	.css-row-gap-xs {
		row-gap: 10rpx;
	}

	.css-row-gap-sm {
		row-gap: 20rpx;
	}

	.css-row-gap {
		row-gap: 30rpx;
	}

	.css-row-gap-df {
		row-gap: 30rpx;
	}

	.css-row-gap-lg {
		row-gap: 40rpx;
	}

	.css-row-gap-xl {
		row-gap: 50rpx;
	}

	.css-column-gap-xs {
		column-gap: 10rpx;
	}

	.css-column-gap-sm {
		column-gap: 20rpx;
	}

	.css-column-gap {
		column-gap: 30rpx;
	}

	.css-column-gap-df {
		column-gap: 30rpx;
	}

	.css-column-gap-lg {
		column-gap: 40rpx;
	}

	.css-column-gap-xl {
		column-gap: 50rpx;
	}
	
		.css-gap-xs {
			gap: 10rpx;
		}
	
		.css-gap-sm {
			gap: 20rpx;
		}
	
		.css-gap {
			gap: 30rpx;
		}
	
		.css-gap-df {
			gap: 30rpx;
		}
	
		.css-gap-lg {
			gap: 40rpx;
		}
	
		.css-gap-xl {
			gap: 50rpx;
		}
	.css-flex-sub {
		flex: 1;
	}

	.css-flex-twice {
		flex: 2;
	}

	.css-flex-treble {
		flex: 3;
	}

	/* // 换行 */
	.css-flex-wrap {
		flex-wrap: wrap;
	}

	/* // 反向换行 */
	.css-flex-wrap-reverse {
		flex-wrap: wrap-reverse;
	}

	/* // 全部居中对齐 */
	.css-flex-middle {
		justify-content: center;
		align-items: center;
		/* #ifndef APP-NVUE */
		align-self: center;
		align-content: center;
		/* #endif */

	}

	/* // y轴对齐方式 */
	.css-align-start {
		align-items: flex-start;
	}

	.css-align-end {
		align-items: flex-end;
	}

	.css-align-center {
		align-items: center;
	}

	.css-align-stretch {
		align-items: stretch;
	}

	/* // x轴对齐方式 */
	.css-justify-start {
		justify-content: flex-start;
	}

	.css-justify-end {
		justify-content: flex-end;
	}

	.css-justify-center {
		justify-content: center;
	}

	.css-justify-between {
		justify-content: space-between;
	}

	.css-justify-around {
		justify-content: space-around;
	}

	.css-round {
		border-radius: 5000rpx;
	}

	.css-radius-top {
		border-radius: 6rpx 6rpx 0rpx 0rpx;
	}

	.css-radius-bottom {
		border-radius: 0rpx 0rpx 6rpx 6rpx;
	}

	.css-radius {
		border-radius: 6rpx;
	}

	.css-radius-lg {
		border-radius: 10rpx;
	}

	.css-radius-xl {
		border-radius: 16rpx;
	}

	.css-radius-xxl {
		border-radius: 24rpx;
	}

	.css-radius-xxxl {
		border-radius: 48rpx;
	}

	.css-radius-xxxxl {
		border-radius: 96rpx;
	}

	/*  -- 内外边距 -- */

	.css-margin-0 {
		margin: 0;
	}

	.css-margin-xs {
		margin: 10rpx;
	}

	.css-margin-sm {
		margin: 20rpx;
	}

	.css-margin {
		margin: 30rpx;
	}

	.css-margin-df {
		margin: 30rpx;
	}

	.css-margin-lg {
		margin: 40rpx;
	}

	.css-margin-xl {
		margin: 50rpx;
	}

	.css-margin-top-xs {
		margin-top: 10rpx;
	}

	.css-margin-top-sm {
		margin-top: 20rpx;
	}

	.css-margin-top {
		margin-top: 30rpx;
	}

	.css-margin-top-df {
		margin-top: 30rpx;
	}

	.css-margin-top-lg {
		margin-top: 40rpx;
	}

	.css-margin-top-xl {
		margin-top: 50rpx;
	}

	.css-margin-right-xs {
		margin-right: 10rpx;
	}

	.css-margin-right-sm {
		margin-right: 20rpx;
	}

	.css-margin-right {
		margin-right: 30rpx;
	}

	.css-margin-right-df {
		margin-right: 30rpx;
	}

	.css-margin-right-lg {
		margin-right: 40rpx;
	}

	.css-margin-right-xl {
		margin-right: 50rpx;
	}

	.css-margin-bottom-xs {
		margin-bottom: 10rpx;
	}

	.css-margin-bottom-sm {
		margin-bottom: 20rpx;
	}

	.css-margin-bottom {
		margin-bottom: 30rpx;
	}

	.css-margin-bottom-df {
		margin-bottom: 30rpx;
	}

	.css-margin-bottom-lg {
		margin-bottom: 40rpx;
	}

	.css-margin-bottom-xl {
		margin-bottom: 50rpx;
	}

	.css-margin-left-xs {
		margin-left: 10rpx;
	}

	.css-margin-left-sm {
		margin-left: 20rpx;
	}

	.css-margin-left {
		margin-left: 30rpx;
	}

	.css-margin-left-df {
		margin-left: 30rpx;
	}

	.css-margin-left-lg {
		margin-left: 40rpx;
	}

	.css-margin-left-xl {
		margin-left: 50rpx;
	}

	.css-margin-lr-xs {
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.css-margin-lr-sm {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.css-margin-lr {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.css-margin-lr-df {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.css-margin-lr-lg {
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.css-margin-lr-xl {
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	.css-margin-tb-xs {
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.css-margin-tb-sm {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.css-margin-tb {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.css-margin-tb-df {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.css-margin-tb-lg {
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.css-margin-tb-xl {
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}

	.css-padding-0 {
		padding: 0;
	}

	.css-padding-xs {
		padding: 10rpx;
	}

	.css-padding-sm {
		padding: 20rpx;
	}

	.css-padding {
		padding: 30rpx;
	}

	.css-padding-df {
		padding: 30rpx;
	}

	.css-padding-lg {
		padding: 40rpx;
	}

	.css-padding-xl {
		padding: 50rpx;
	}

	.css-padding-top-xs {
		padding-top: 10rpx;
	}

	.css-padding-top-sm {
		padding-top: 20rpx;
	}

	.css-padding-top {
		padding-top: 30rpx;
	}

	.css-padding-top-df {
		padding-top: 30rpx;
	}

	.css-padding-top-lg {
		padding-top: 40rpx;
	}

	.css-padding-top-xl {
		padding-top: 50rpx;
	}

	.css-padding-right-xs {
		padding-right: 10rpx;
	}

	.css-padding-right-sm {
		padding-right: 20rpx;
	}

	.css-padding-right {
		padding-right: 30rpx;
	}

	.css-padding-right-df {
		padding-right: 30rpx;
	}

	.css-padding-right-lg {
		padding-right: 40rpx;
	}

	.css-padding-right-xl {
		padding-right: 50rpx;
	}

	.css-padding-bottom-xs {
		padding-bottom: 10rpx;
	}

	.css-padding-bottom-sm {
		padding-bottom: 20rpx;
	}

	.css-padding-bottom {
		padding-bottom: 30rpx;
	}

	.css-padding-bottom-df {
		padding-bottom: 30rpx;
	}

	.css-padding-bottom-lg {
		padding-bottom: 40rpx;
	}

	.css-padding-bottom-xl {
		padding-bottom: 50rpx;
	}

	.css-padding-left-xs {
		padding-left: 10rpx;
	}

	.css-padding-left-sm {
		padding-left: 20rpx;
	}

	.css-padding-left {
		padding-left: 30rpx;
	}

	.css-padding-left-df {
		padding-left: 30rpx;
	}

	.css-padding-left-lg {
		padding-left: 40rpx;
	}

	.css-padding-left-xl {
		padding-left: 50rpx;
	}

	.css-padding-lr-xs {
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.css-padding-lr-sm {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.css-padding-lr {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.css-padding-lr-df {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.css-padding-lr-lg {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.css-padding-lr-xl {
		padding-left: 50rpx;
		padding-right: 50rpx;
	}

	.css-padding-tb-xs {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.css-padding-tb-sm {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.css-padding-tb {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.css-padding-tb-lg {
		padding-top: 40rpx;
		padding-bottom: 40rpx;
	}

	.css-padding-tb-xl {
		padding-top: 50rpx;
		padding-bottom: 50rpx;
	}

	/* ==================
          文本
 ==================== */

	.css-text-xs {
		font-size: 20rpx;
	}

	.css-text-sm {
		font-size: 24rpx;
	}

	.css-text-df {
		font-size: 28rpx;
	}

	.css-text-lg {
		font-size: 32rpx;
	}

	.css-text-xl {
		font-size: 36rpx;
	}

	.css-text-xxl {
		font-size: 44rpx;
	}

	.css-text-sl {
		font-size: 80rpx;
	}

	.css-text-xsl {
		font-size: 120rpx;
	}

	/* #ifndef APP-NVUE */
	.css-text-price::before {
		content: '¥';
		font-size: 70%;
		margin-right: 4rpx;
	}

	/* #endif */
	.css-text-cut {
		/* #ifdef APP-NVUE */
		/*  nvue下，可以直接使用lines属性，这是weex特有样式 */
		lines: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		flex: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		/* #endif */
	}

	.css-text-del {
		text-decoration: line-through;
	}

	.css-text-bold {
		font-weight: bold;
	}

	.css-text-center {
		text-align: center;
	}

	.css-text-left {
		text-align: left;
	}

	.css-text-right {
		text-align: right;
	}

	.css-text-primary {
		color: #2979ff;
	}

	.css-text-warning {
		color: #ff9900;
	}

	.css-text-error {
		color: #fa3534;
	}

	.css-text-success {
		color: #19be6b;
	}

	.css-text-info {
		color: #909399;
	}

	.css-text-red {
		color: #e54d42;
	}

	.css-text-orange {
		color: #f37b1d;
	}

	.css-text-yellow {
		color: #fbbd08;
	}

	.css-text-olive {
		color: #8dc63f;
	}

	.css-text-green {
		color: #39b54a;
	}

	.css-text-cyan {
		color: #1cbbb4;
	}

	.css-text-blue {
		color: #0081ff;
	}

	.css-text-purple {
		color: #6739b6;
	}

	.css-text-mauve {
		color: #9c26b0;
	}

	.css-text-pink {
		color: #e03997;
	}

	.css-text-brown {
		color: #a5673f;
	}

	.css-text-grey {
		color: #8799a3;
	}

	.css-text-gray {
		color: #aaaaaa;
	}

	.css-text-black {
		color: #333333;
	}

	.css-text-white {
		color: #ffffff;
	}

	/* // 透明 */
	.css-bg-transparent {
		background-color: transparent;
		color: #333333;
	}

	.css-bg-red {
		background-color: #fa3534;
		color: #ffffff;
	}

	.css-bg-orange {
		background-color: #f37b1d;
		color: #ffffff;
	}

	.css-bg-yellow {
		background-color: #fbbd08;
		color: #ffffff;
	}

	.css-bg-olive {
		background-color: #8dc63f;
		color: #ffffff;
	}

	.css-bg-green {
		background-color: #39b54a;
		color: #ffffff;
	}

	.css-bg-cyan {
		background-color: #1cbbb4;
		color: #ffffff;
	}

	.css-bg-blue {
		background-color: #0081ff;
		color: #ffffff;
	}

	.css-bg-purple {
		background-color: #c91dc5;
		color: #ffffff;
	}

	.css-bg-mauve {
		background-color: #9c26b0;
		color: #ffffff;
	}

	.css-bg-pink {
		background-color: #e03997;
		color: #ffffff;
	}

	.css-bg-brown {
		background-color: #a5673f;
		color: #ffffff;
	}

	.css-bg-grey {
		background-color: #8799a3;
		color: #fa3534;
	}

	.css-bg-gray {
		background-color: #f0f0f0;
		color: #fa3534;
	}

	.css-bg-black {
		background-color: #333333;
		color: #ffffff;
	}

	.css-bg-white {
		background-color: #ffffff;
		color: #000000;
	}

	.css-bg-red-light {
		color: #ffff99;
		background-color: #e54d42;
	}

	.css-bg-orange-light {
		color: #fde6d2;
		background-color: #f37b1d;
	}

	.css-bg-yellow-light {
		color: #fbbd08;
		background-color: #fef2ce;
	}

	.css-bg-olive-light {
		color: #8dc63f;
		background-color: #e8f4d9;
	}

	.css-bg-green-light {
		color: #d7f0db;
		background-color: #39b54a;
	}

	.css-bg-cyan-light {
		color: #1cbbb4;
		background-color: #d2f1f0;
	}

	.css-bg-blue-light {
		color: #cce6ff;
		background-color: #0081ff;
	}

	.css-bg-purple-light {
		color: #e1d7f0;
		background-color: #6739b6;
	}

	.css-bg-mauve-light {
		color: #9c26b0;
		background-color: #ebd4ef;
	}

	.css-bg-pink-light {
		color: #f9d7ea;
		background-color: #e03997;
	}

	.css-bg-brown-light {
		color: #000000;
		background-color: #a5673f;
	}

	.css-bg-grey-light {
		color: #000000;
		background-color: #e7ebed;
	}

	.css-bg-gradual-red {
		/* #ifndef APP-NVUE */
		background-image: linear-gradient(45deg, #f43f3b, #ec008c);
		/* #endif */
		/* #ifdef APP-NVUE */
		background-image: linear-gradient(to right, #f43f3b, #ec008c);
		/* #endif */
		color: #ffffff;
	}

	.css-bg-gradual-orange {
		/* #ifndef APP-NVUE */
		background-image: linear-gradient(45deg, #ff9700, #ed1c24);
		/* #endif */
		/* #ifdef APP-NVUE */
		background-image: linear-gradient(to right, #ff9700, #ed1c24);
		/* #endif */
		color: #ffffff;
	}

	.css-bg-gradual-green {
		/* #ifndef APP-NVUE */
		background-image: linear-gradient(45deg, #39b54a, #8dc63f);
		/* #endif */
		/* #ifdef APP-NVUE */
		background-image: linear-gradient(to right, #39b54a, #8dc63f);
		/* #endif */
		color: #ffffff;
	}

	.css-bg-gradual-purple {
		/* #ifndef APP-NVUE */
		background-image: linear-gradient(45deg, #9000ff, #5e00ff);
		/* #endif */
		/* #ifdef APP-NVUE */
		background-image: linear-gradient(to right, #9000ff, #5e00ff);
		/* #endif */
		color: #ffffff;
	}

	.css-bg-gradual-pink {
		/* #ifndef APP-NVUE */
		background-image: linear-gradient(45deg, #ec008c, #6739b6);
		background-image: linear-gradient(to right, #ec008c, #6739b6);
		/* #endif */
		color: #ffffff;
	}

	.css-bg-gradual-blue {
		/* #ifndef APP-NVUE */
		background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
		/* #endif */
		/* #ifdef APP-NVUE */
		background-image: linear-gradient(to right, #0081ff, #1cbbb4);
		/* #endif */
		color: #ffffff;
	}
	.search-input-index{
		border: 2px solid #1678FF;
		border-radius: 10px;
	}
